<template>
	<view class="index pb-150">
		<Navigation title="医生详情" background="#fff" />
		<view class="w-f h-296 top">
			<image src="../../static/index/bg.png" class="w-f h-296"></image>
			<view class="top-box f ai-c jc-s-b pl-72 pr-32 pt-88 w-f">
				<view class="f ai-c">
					<image :src="detail.avatar" class="w-120 h-120 b-120 mr-24" mode="aspectFill"></image>
					<view>
						<view>{{detail.name}}</view>
						<view class="mt-16">
							<text class="fs-26 text-color2">评分</text>
							<text class="fs-26 fw-600 text-color ml-8">{{detail.scores||0}}</text>
							<text class="fs-26 text-color2 ml-24">接诊量</text>
							<text class="fs-26 fw-600 text-color ml-8">{{detail.orderNum||0}}</text>
						</view>
					</view>
				</view>
				<view class="f ai-c jc-c w-178 h-84 status">
					<u-switch v-model="detail.onLineStatus" @change="change('onLineStatus',detail.onLineStatus)" size="22"
						activeColor="#FABB3C"></u-switch>
					<view class="fs-26 text-color ml-12" v-if="detail.onLineStatus==1">在线</view>
					<view class="fs-26 text-color ml-12" v-if="detail.onLineStatus==0">离线</view>
				</view>
			</view>
		</view>
		<view class="ph-32">
			<view class="fs-36 fw-600 text-color4">接诊方式</view>
			<view class="f jc-s-b mt-20">
				<view class="w-218 h-132 b-12 way ph-20 pt-20" :class="tabIndex==0?'active':''" @click="chooseT(0)" v-if="toMeun('图文问诊')==1">
					<image src="../../static/index/select.png" class="w-32 h-32 select"></image>
					<view class="f ai-c jc-s-b">
						<view class="fs-26 fw-600 text-color4">图文问诊</view>
						<image :src="img" class="w-40 h-40"></image>
					</view>
					<view class="mt-16"><u-switch v-model="detail.imageConsultation"
							@change="change('imageConsultation',detail.imageConsultation)" size="18" activeColor="#FABB3C"></u-switch>
					</view>
				</view>
				<view class="w-218 h-132 b-12 way ph-20 pt-20" :class="tabIndex==1?'active':''" @click="chooseT(1)" v-if="toMeun('电话问诊')==1">
					<image src="../../static/index/select.png" class="w-32 h-32 select"></image>
					<view class="f ai-c jc-s-b">
						<view class="fs-26 fw-600 text-color4">电话问诊</view>
						<image :src="tel" class="w-40 h-40"></image>
					</view>
					<view class="mt-16"><u-switch v-model="detail.phoneConsultation"
							@change="change('phoneConsultation',detail.phoneConsultation)" size="18" activeColor="#FABB3C"></u-switch>
					</view>
				</view>
				<view class="w-218 h-132 b-12 way ph-20 pt-20" :class="tabIndex==2?'active':''" @click="chooseT(2)" v-if="toMeun('音视频问诊')==1">
					<image src="../../static/index/select.png" class="w-32 h-32 select"></image>
					<view class="f ai-c jc-s-b">
						<view class="fs-26 fw-600 text-color4">音频问诊</view>
						<image :src="audio" class="w-40 h-40"></image>
					</view>
					<view class="mt-16"><u-switch v-model="detail.voiceConsultation"
							@change="change('voiceConsultation',detail.voiceConsultation)" size="18" activeColor="#FABB3C"></u-switch>
					</view>
				</view>
			</view>
			<view class="serve mt-16 b-12 ph-28 pv-28">
				<view class="fs-30 fw-600 text-color4">服务说明</view>
				<view class="mt-12 fs-28 text-color3">{{fuList[tabIndex].remark}}</view>
			</view>
			<!-- 消息 -->
			<!-- <view class="w-f h-72 f ai-c jc-s-b news mt-20 ph-20 b-24">
        <image src="../../static/index/news.png" class="w-32 h-32 mr-12"></image>
        <view class="fs-28 fw-600 text-color f f1 text-ellipsis-1">你有最新消息等你处理！！</view>
        <view class="w-124 h-56 b-56 f ai-c jc-c reply">
          <image src="../../static/index/ask.png" class="w-24 h-24 mr-8"></image>
          <text class="fs-26 text-color5">回复</text>
        </view>
      </view> -->
			<!-- 明细 -->
			<view class="f ai-c mt-32" style="justify-content: space-between;">
				<view class="fs-36 fw-600 text-color4">接诊明细</view>
				<view class="fs-28 text-color4 f at-c" @click="sx">刷新<u-icon name="reload"></u-icon></view>
			</view>

			<view class="f mt-16 status">
				<!-- {{ item.num }} -->
				<view v-for="(item, index) in statusList" :key="index" class="h-64 b-64 ph-24 f ai-c fs-26 text-color4 mr-16"
					:class="index === status ? 'active' : ''" @click="changeStatus(index)">{{ item.name }}{{item.num||''}}</view>
			</view>
			<view class="f mt-20 orderStatus" v-if="status!=0">
				<view v-for="(item, index) in orderList" :key="index"
					class="w-104 h-48 f ai-c jc-c fs-24 text-color2 b-48 mr-16" :class="index === orderStatus ? 'active' : ''"
					@click="changeOrderStatus(index)">{{ item.name }}
				</view>
			</view>
			<!-- 列表 -->
			<scroll-view style="height:660rpx;margin-top: 20rpx;" scroll-y @scrolltolower="toMore">
				<view class="f jc-s-b list mt-20 ph-28 pv-28" @click="toOrderdetail(item)" v-for="(item,index) in list">
					<view class="f ai-c f1">
						<image :src="item.petsDO.avatar" class="w-140 h-140 b-140"></image>
						<view class="f fd-c ml-24 f1">
							<view class="f ai-c f1" style="justify-content: space-between;">
								<view>
									<text class="fs-28 fw-600 text-color4">{{item.petsDO.userName}}</text>
									<text class="ml-8 fs-28 text-color4">({{item.petsDO.mobile}})</text>
								</view>
								<view class="w-72 h-28 f ai-c jc-c fs-20 type"
									:style="{ color: statusColor[item.status].color, background: statusColor[item.status].bg }">
									{{statusColor[item.status].name}}
								</view>
							</view>
							<view class="mt-8">
								<text class="fs-24 text-color3">宠物：</text>
								<text class="fs-24 text-color4">{{item.petsDO.name||'未选择'}}</text>
							</view>

							<view class="f" style="justify-content: space-between;">
								<view class="mt-20 fs-26 text-color7 fw-600">¥{{item.totalPrice}}</view>
								<view class="f ai-c">
									<view class="w-124 h-56 b-56 f ai-c jc-c reply ml-20" v-if="item.type==1 && item.status==2"
										@click.stop="upImg('chat',item)">
										<image src="../../static/index/ask.png" class="w-24 h-24 mr-8"></image>
										<text class="fs-26 text-color5">回复</text>
									</view>
									<view class="w-124 h-56 b-56 f ai-c jc-c reply ml-20" v-if="item.type==2 && item.status==2"
										@click.stop="upImg('call',item)">
										<image src="../../static/index/tel.png" class="w-24 h-24 mr-8"></image>
										<text class="fs-26 text-color5">回拨</text>
									</view>
									<view class="w-160 h-56 b-56 f ai-c jc-c reply ml-20" v-if="item.type==3 && item.status==2"
										@click.stop="upImg('video',item)">
										<text class="fs-26 text-color5">拨打视频</text>
									</view>
									<view class="w-124 h-56 b-56 f ai-c jc-c reply ml-20" @click.stop='end(item)' v-if="item.status==2">
										<!-- <image src="../../static/select-check.png" class="w-24 h-24 mr-8"></image> -->
										<text class="fs-26 text-color5">完成</text>
									</view>
								</view>
							</view>
						</view>


					</view>
				</view>

			</scroll-view>
			<!-- <view class="f jc-s-b ai-c list mt-20 ph-28 pv-28" @click="toPetDetail">
        <view class="f ai-c f1">
          <image src="../../static/logo.png" class="w-140 h-140 b-140"></image>
          <view class="f fd-c ml-24 f1">
            <view class="fs-28 fw-600 text-color4"> 养了猫的家庭 </view>
            <view class="fs-28 mt-8 text-color4">18285522105</view>
            <view class="mt-8 fs-24 text-color3"> 时间：2023/10/06 12:11:11 </view>
            <view class="mt-20 fs-26 text-color7 fw-600">¥80.55</view>
          </view>
        </view>
        <view class="w-124 h-56 b-56 f ai-c jc-c reply">
          <image src="../../static/index/ask.png" class="w-24 h-24 mr-8"></image>
          <text class="fs-26 text-color5">回复</text>
        </view>
        <view class="w-124 h-56 b-56 f ai-c jc-c reply">
          <image src="../../static/logo.png" class="w-24 h-24 mr-8"></image>
          <text class="fs-26 text-color5">回拨</text>
        </view>
      </view> -->
		</view>

		<Tabbar tab="0" />
	</view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { doctorDetail, editBizStatus, orderPage, orderEnd, dictDataType, get_phone, faceRecognition } from '@/services/api/index';
	import { onShow, onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	import { useAuthStore } from '@/store/modules/auth';
	import img from '@/static/index/img.png';
	import tel from '@/static/index/tel.png';
	import audio from '@/static/index/audio.png';
	const detail = ref('');
	const fuList = ref([]);
	const wayCurt = ref(0);
	const status = ref(0);
	const orderStatus = ref(0);
	const statusColor = {
		'0': {
			color: '#FA7F28',
			bg: '#FFF5ED',
			name: '待付款',
		},
		'2': {
			color: '#4974F5',
			bg: '#EDF2FF',
			name: '服务中',
		},
		'3': {
			color: '#25B85B',
			bg: '#E6FFEF',
			name: '已完成',
		},
		'1': {
			color: '#FA7F28',
			bg: '#FFF5ED',
			name: '待付款',
		},
		'4': {
			color: '#999999',
			bg: '#F8F8F8',
			name: '已取消',
		},
	};
	const orderList = [{ name: '待付款' }, { name: '服务中' }, { name: '已完成' }, { name: '已取消' }];
	const statusList = [
		{ name: '全部', num: 0 },
		{ name: '图文', num: 0 },
		{ name: '电话', num: 0 },
		{ name: '音频', num: 0 },
	];
	const wayList = [
		{
			name: '图文问诊',
			price: 80,
			img: img,
		},
		{
			name: '电话问诊',
			price: 80,
			img: tel,
		},
		{
			name: '音频问诊',
			price: 80,
			img: audio,
		},
	];
	const { proxy } = getCurrentInstance();
	const list = ref<any[]>([]);
	const keyword = ref('');
	const tabIndex = ref(0)
	const authStore = useAuthStore();
	const meunList=ref([])
	const listParams = ref<any>({
		pageNo: 1,
		pageSize: 10,
		doctorId: authStore.getUserId
	});
	onLoad(() => {
		list.value = []
		if (authStore.getUserId == null) {
			uni.navigateTo({
				url: '/pages/login/index',
			});
			return;
		} else {
			getList();
			getDetail();
			getFuwu()
		}

		uni.hideTabBar()
	});
	function toMeun(name){
		let isShow=1
		for(var i in meunList.value){
			if(name== meunList.value[i].label){
				isShow=meunList.value[i].remark
			}
		}
		return isShow
	}
	function sx() {
		getList();
		getDetail();
		getFuwu()
	}
	function upImg(name, item) {
		uni.chooseImage({
			count: 1, //默认9
			sourceType: ['camera'],
			success: async function (res) {
				const base64Data = await toBase64(res.tempFilePaths[0])
				const res2 = await toFace(base64Data)
				if (res2.data) {
					if (name == 'call') {
						call(item)
					} else if (name == 'chat') {
						toChat(item)
					} else if (name == 'video') {
						uni.navigateTo({
							url: `/TUICallKit/pages/call?id=${item.userId}`,
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '人脸验证失败'
					})
				}

			}
		});
	}
	function toBase64(url) {
		return new Promise((resolve, reject) => {
			// 获取文件系统管理器
			const fs = uni.getFileSystemManager();
			// 读取文件
			fs.readFile({
				filePath: url, // 图片的本地路径
				encoding: 'base64', // 编码格式为base64
				success: res => {
					// 成功则resolve返回结果
					resolve(res.data);
				},
				fail: err => {
					// 失败则reject返回错误信息
					reject(err);
				}
			});
		});
	}
	function toMore() {
		listParams.value.pageNo++;
		getList();
	}
	function chooseT(e : number) {
		tabIndex.value = e
	}
	async function getList() {
		// if (listParams.value.doctorId) {

		const { data } = await orderPage(listParams.value);
		console.log(data, 'data')
		statusList[1].num = data.other[1];
		statusList[2].num = data.other[2];
		data.list.forEach((item : any) => {
			if (item.appPetsRespVO == null) {
				item.appPetsRespVO = { name: '', avatar: '' };
			}
		});
		list.value = list.value.concat(data.list);
		// }

	}
	//医生详情
	async function getDetail() {
		// console.log(authStore)

		const { data } = await doctorDetail({ id: authStore.getUserId });

		data.onLineStatus = data.onlineStatus == 1 ? true : false;
		detail.value = data;
		detail.value.scores = (detail.value.scores * 1).toFixed(2)
		listParams.value.doctorId = data.id
		console.log(listParams.value.doctorId)

		if (detail.value == null) {
			uni.reLaunch({
				url: '/pages/settled/index',
			});
		}
		//入驻
		if (detail.value.groupType == 1) {
			uni.navigateTo({
				url: '/pages/settled/index',
			});
		}
	}
	//获取服务
	async function getFuwu() {
		const { data } = await dictDataType({ type: 'service_description' });
		fuList.value = data
		//获取能打开的服务
		const res = await dictDataType({ type: 'doctor_model' });
		meunList.value = res.data
		
		if(meunList.value.findIndex(e=>e.label=='音视频问诊'&&e.remark=='1')>-1){
			tabIndex.value=meunList.value.findIndex(e=>e.label=='音视频问诊'&&e.remark=='1')
		}
		if(meunList.value.findIndex(e=>e.label=='电话问诊'&&e.remark=='1')>-1){
			tabIndex.value=meunList.value.findIndex(e=>e.label=='电话问诊'&&e.remark=='1')
		}
		if(meunList.value.findIndex(e=>e.label=='图文问诊'&&e.remark=='1')>-1){
			tabIndex.value=meunList.value.findIndex(e=>e.label=='图文问诊'&&e.remark=='1')
		}
		console.log(tabIndex.value)
	}
	//完成服務
	async function end(item : any) {
		const { data } = await orderEnd({ orderId: item.id });
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}
	//宠物详情
	function toPetDetail() {
		uni.navigateTo({
			url: '/pages_index/petDetail',
		});
	}
	//宠物详情
	function toChat(item : any) {
		uni.setStorageSync('petInfo', item.petsDO)
		uni.navigateTo({
			url: '/pages/chat/chat?id=1_' + item.userId,
		});
	}
	//订单详情
	function toOrderdetail(item : any) {
		uni.navigateTo({
			url: `/pages_index/orderdetail?id=${item.id}`,
		});
	}
	async function toFace(url) {
		const res = await faceRecognition({ url })
		return res.data
	}
	//拨打电话
	async function call(item : any) {
		get_phone({
			dockerMobile: item.memberDoctorDO.mobile,
			userMobile: item.petsDO.mobile
		}).then(res => {
			uni.makePhoneCall({
				phoneNumber: res.data.middleNumber
			})
		})
	}
	async function change(keyName : string, value : boolean) {
		let vl = ''
		let param = {};
		if (keyName == 'onLineStatus') {
			param.onlineStatus = detail.value.onLineStatus == false ? 0 : 1;
		} else if (keyName == 'imageConsultation') {
			param.imageConsultation = detail.value.imageConsultation == false ? 0 : 1;
		} else if (keyName == 'voiceConsultation') {
			param.voiceConsultation = detail.value.voiceConsultation == false ? 0 : 1;
		} else if (keyName == 'phoneConsultation') {
			param.phoneConsultation = detail.value.phoneConsultation == false ? 0 : 1;
		}
		await editBizStatus(param);
		getDetail()
	}
	function changeOrderStatus(data : number) {
		orderStatus.value = data;
		listParams.value.orderStatus = data + 1;
		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}
	function changeStatus(data : number) {
		status.value = data;
		if (data > 0) {
			listParams.value.consultType = data;
		} else {
			delete listParams.value.consultType
			delete listParams.value.orderStatus
		}

		list.value = [];
		listParams.value.pageNo = 1;
		getList();
	}
	const changeWayCurt = (data : number) => {
		wayCurt.value = data;
	};

	// //下拉刷新
	// onPullDownRefresh(() => {
	// 	list.value = [];
	// 	listParams.value.pageNo = 1;
	// 	getList();
	// });
	// //上拉加载
	// onReachBottom(() => {
	// 	listParams.value.pageNo++;
	// 	getList();
	// });
</script>
<style lang="scss" scoped>
	.index {
		background: #f5f5f5;
		min-height: 100vh;

		.news {
			background-image: linear-gradient(90deg, #fffaf0 0%, #ffebc2 100%);
			border: 4rpx solid #ffffff;
		}

		.orderStatus {
			view {
				border: 2rpx solid #dddddd;
			}

			.active {
				border: 1rpx solid #fabb3c;
				color: #fabb3c;
			}
		}

		.list {
			background: #fff;

			.type {
				position: relative;
				top: 10rpx;
			}
		}

		.reply {
			background: #fabb3c;
		}

		.status {
			view {
				background: #fff;
			}

			.active {
				background: #faf5e6;
				border: 1rpx solid #fabb3c;
				color: #fabb3c;
			}
		}

		.serve {
			border: 1rpx solid #f0f0f0;
			background: #fff;
		}

		.way {
			border: 2rpx solid #f0f0f0;
			background: #fff;
			position: relative;

			.select {
				position: absolute;
				right: 0;
				top: 0;
			}
		}

		.active {
			background-image: url('https://cwht.ricecs.cn/app/jx.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
			border: none;
			background-color: transparent !important;
		}

		.top {
			position: relative;

			.top-box {
				position: absolute;
				left: 0;
				top: 0;

				.status {
					background: #fff8eb;
					border-radius: 100rpx 0 0 100rpx;
				}
			}
		}
	}
</style>